<template>
	<div class="log-wrapper">
        <Tabs type="card">
            <TabPane label="日志">
                <Card class="no-border-card">
                    <!--标题-->
                    <p slot="title">日志</p>
                    <!--标题end-->

                    <!--搜索条件-->
                    <Row :gutter="20" class="margin-bottom-20">
                        <i-col :span="5">
                            <Select
                                v-model="indexOne"
                                placeholder="全部"
                                clearable
                                @on-change="handleOptionChange(1)">
                                <Option
                                    v-for="(lv1, lv1Index) in operationTypes"
                                    :value="lv1Index"
                                    :key="lv1.id">
                                    {{lv1.name}}
                                </Option>
                            </Select>
                        </i-col>
                        <i-col :span="5">
                            <Select
                                v-model="indexTwo"
                                placeholder="全部"
                                clearable
                                @on-change="handleOptionChange(2)">
                                <Option
                                    v-for="(lv2, lv2Index) in lv2Options"
                                    :value="lv2Index"
                                    :key="lv2.id">
                                    {{lv2.name}}
                                </Option>
                            </Select>
                        </i-col>
                        <i-col :span="5">
                            <Select
                                v-model="indexThree"
                                placeholder="全部"
                                clearable>
                                <Option
                                    v-for="(lv3, lv3Index) in lv3Options"
                                    :value="lv3Index"
                                    :key="lv3.id">
                                    {{lv3.name}}
                                </Option>
                            </Select>
                        </i-col>
                        <i-col :span="5">
                            <DatePicker
                                type="daterange"
                                style="width:100%;"
                                v-model="timeRange"
                                placeholder="选择时间段"
                            />
                        </i-col>
                        <Button type="primary" icon="ios-search-strong" style="padding:4px 0px 3px;" @click="getOperateData(1)"></Button>
                    </Row>
                    <!--搜索条件end-->

                    <!--日志数据-->
                    <Table border stripe :columns="columns" :data="datas" :loading="isLoadig"></Table>
                    <!--日志数据end-->


                    <!--分页-->
                    <Page :total="total"
                        :page-size="size"
                        :current.sync="currentPage"
                        show-elevator
                        @on-change="getOperateData"
                        show-total style="text-align:center"></Page>
                    <!--分页end-->
                </Card>
            </TabPane>
        </Tabs>
	</div>
</template>

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import { twoDaysAgo, now, searchTimeRange } from '@/libs/date'

export default {
  name: 'log_index',
  data () {
    return {
      isLoadig: false,
      size: 20,
      total: 0,
      currentPage: 1,
      indexOne: '',
      indexTwo: '',
      indexThree: '',
      timeRange: [ twoDaysAgo, now ],
      operationTypes: [],
      columns: [
        // 日志表头
        {
          title: '说明',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.operation_type.name || '-')
          }
        },
        {
          title: '结果',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.target.value || '-')
          }
        },
        {
          title: '范围',
          align: 'left',
          render: (h, p) => {
            return h('span', p.row.target.name || '-')
          }
        },
        {
          title: '时间',
          align: 'center',
          width: 140,
          render (h, p) {
            return h(
              'span', // 标签名称
              new Date(p.row.time).Format('yyyy-MM-dd HH:mm')
            )
          }
        },
        {
          title: '操作者',
          align: 'center',
          width: 120,
          render: (h, p) => {
            return h('span', p.row.user_name || '-')
          }
        },
        {
          title: '状态',
          align: 'center',
          width: 100,
          render: (h, { row }) => {
            if (row.operation_type.name.includes('绑定')) return null
            return <span>{row.res_state === 1 ? '成功' : '失败'}</span>
          }
        }
      ],
      datas: [
        // 日志具体数据
      ]
    }
  },
  computed: {
    lv2Options () {
      const { operationTypes, indexOne } = this
      if (!operationTypes[indexOne]) return []
      return operationTypes[indexOne].children
    },
    lv3Options () {
      const { operationTypes, indexOne, indexTwo } = this
      if (!operationTypes[indexOne] || !operationTypes[indexOne].children[indexTwo]) return []
      return operationTypes[indexOne].children[indexTwo].children
    }
  },
  mounted () {
    this.getOperateTypes('all')
    this.getOperateData()
  },
  methods: {
    handleOptionChange (deep) {
      if (deep < 3) this.indexThree = ''
      if (deep < 2) this.indexTwo = ''
    },
    async getOperateTypes (type) {
      const res = await http.req(api.operations_types, null, null)
      this.operationTypes = res.rows
    },
    getQuery () {
      const { indexOne, indexTwo, indexThree } = this
      const [ start_time, end_time ] = searchTimeRange(this.timeRange)
      const query = {
        start_time,
        end_time,
        limit: this.size,
        offset: this.size * (this.currentPage - 1)
      }
      if (Number.isInteger(indexThree)) {
        query.type_code = this.operationTypes[indexOne].children[indexTwo].children[indexThree].code
      } else if (Number.isInteger(indexTwo)) {
        query.parent_id = this.operationTypes[indexOne].children[indexTwo].id
      } else if (Number.isInteger(indexOne)) {
        query.parent_id = this.operationTypes[indexOne].id
      }
      return query
    },
    getOperateData (page) {
      const monthTimestamp = 30 * 24 * 60 * 60 * 1000
      // 获取操作记录数据
      if (page === 1) this.currentPage = 1
      const query = this.getQuery()
      if (!query.start_time || !query.end_time || (query.end_time - query.start_time > monthTimestamp)) {
        this.$Message.info('查询时间不能大于30天')
        return
      }
      this.isLoadig = true
      http.request(this, api.operations, null, query, res => {
        if (res) {
          this.datas = res.rows
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    }
  }
}
</script>

<style lang="less">
</style>